<template>
  <el-dialog
  :visible.sync="costExpensesDialogVisible"
  width="60%"
  :close-on-click-modal="false"
  center>
      <section class="common-text-block-section"  id="toTop">
      <div class="data-table-content">
        <!-- <span v-if="!needComplete">没有需要完善的项</span> -->
        <div class="receipt-item" v-for="(receiptItem, receiptIndex) in receiptList" :key="receiptIndex">
          <el-card class="box-card">
            <div class="clearfix">
              <span style="font-size:15px;color:blue;">发票 {{receiptIndex+1}}</span>
            </div>
            <div style="width:60%;  float: left; margin-bottom: 20px; margin-left:30px">
              <el-row v-for="(showItem, showIndex) in showfields" :gutter="20" :key="showIndex">
                <el-col :span="6"><div align="left">{{showItem.title}}: </div></el-col>
                <el-col :span="12"><div align="left"></div>{{receiptItem[showItem.field]}}</el-col>
              </el-row>
            </div>
             <div style="width:30%; border-left: 1px solid #ddd; padding-left: 12px; padding-bottom:0; margin-bottom:8px; border: 1px solid white; float: right">
              <span>所属科目</span>
            <el-select
                v-model="receiptItem.subject"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in subPejctOptions"
                  :key="item.code"
                  :label="item.text"
                  :value="item.text"
                >
                </el-option>
            </el-select>
             <template>
                 <el-checkbox v-model="receiptItem.memory" :checked="receiptItem.memory == null? true: receiptItem.memory">保存为记忆</el-checkbox>
             </template>
            </div>
          </el-card>
        </div>
        <div class="suspension">

        </div>
      </div>
    </section>

  <span slot="footer" class="dialog-footer">
    <el-button type="primary" size="small" @click.native="saveAndUpdate">保存并更新</el-button>
  </span>
</el-dialog>
</template>

<script>
import costOrExpensesInfos from './costOrExpensesInfos.vue';
import map from "@/components/map.js";

export default {
  components:{
    costOrExpensesInfos
  },
  data(){
    return {
      clientInfo:null,
      receiptList:[],
      showfields:[
          {field:"id",title:"发票号码"},
          {field:"seller",title:"销售方"},
          {field:"goodsType",title:"货物字段"},
          {field:"amount",title:"金额"},
          {field:"taxAmount", title:"税额"},
          {field:"date", title:"开票日期"}
      ],
      subPejctOptions: map.subjectsList,
      // subjectValue: "",
    }
  },
  props:{
    costExpensesDialogVisible: {
      type: Boolean,
      default: false
    },
  },
  methods:{
    loadData(){
      const data = localStorage.getItem("voucherDetail");
      if (data) {
        this.clientInfo = JSON.parse(data);
      }
    },
    init() {
      this.$http
        .get("/smart/inputReceiptList", {
          params: {
            cName: this.clientInfo.companyName,
            bName: this.clientInfo.bCompanyName,
          },
        })
        .then((res) => {
          if (res.code != 0) {
            return this.$message.error(res.message);
          }
          this.receiptList = res.data.receiptList;
        });
    },
    saveAndUpdate() {
      let postData = {};
      postData.bName = this.clientInfo.bCompanyName;
      postData.cName = this.clientInfo.companyName;
      postData.inputReceiptList = this.receiptList;
      // return console.log("post 请求：", postData);
      this.$http.post("/smart/saveInputReceiptList", postData);
      this.costExpensesDialogVisible = false;
    }
  },

  watch:{
    costExpensesDialogVisible(newValue, oldValue){
      if(typeof(newValue) == "boolean"){
        this.$emit("costExpensesDialogVisibleChanged", newValue);
      }
    }
  },

  mounted(){
    this.loadData();
    this.init();
  }

}
</script>

<style lang="less"  scoped>
@import "../../../assets/var.less";
.upload-info-section {
  display: flex;
  min-height: 600px;
  .common-text-block-section {
    flex: 1;
    margin-bottom: 0;
    .item {
      width: 49%;
    }
  }
  .common-text-block-section ~ .common-text-block-section {
    margin-left: 10px;
  }
  .iconfont::before {
    color: @color-grey-low;
  }
  .upload-info-section {
    display: flex;
    .left,
    .right {
      flex: 1;
    }
    .left span {
      font-size: 14px;
      &.bank {
        color: @color-error;
      }
      &.uploaded {
        color: @color-green;
      }
    }
  }
}
.text-section {
  flex: 1;
}
.title-section {
  display: flex;
  width:100%;
  justify-content: space-between;
  align-items: center;
  .title {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .right {
    display: inline-flex;
    align-items: center;
  }
  .edit-text {
    margin-right: 5px;
  }
}
.fixed{
  position:fixed; top:30px; z-index:9999;
  right:8px;
}
.title-btns {
  margin-right: 20px;
  float:right;
}
.info-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
    width: 90%;
    padding:0;
    margin:0;
    // min-width: 1100px;
    margin-bottom: 10px;
    margin-left: 30px;
    box-shadow: 0 0 0 1px #ccc;
}
.el-card_header{
  margin-top: 6px;
  margin-bottom: 6px;
}
.clearfix{
  margin-left:10px;
}

.card-title{
  margin-top: 8px;
  margin-bottom: 2px;
}

.el-col{
  height: 100%;
  margin-bottom: 2px;
}

.suffix{
  height: 100%;
  width: 72%;
}

.select-input{
  margin: 8px;
}

.suspension{
  position: fixed;
}
.el-checkbox {
    margin-top: 10px;
}
</style>
